<template>
  <a-modal
    :width="800"
    :visible="visible"
    :confirm-loading="loading"
    :forceRender="true"
    :title="isUpdate ? '修改' : '新建'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      ref="form"
      :model="form"
      :rules="rules"
      :label-col="{ md: { span: 4 }, sm: { span: 24 } }"
      :wrapper-col="{ md: { span: 20 }, sm: { span: 24 } }"
    >
      <!--
      <a-form-item label="标签编号:" name="tagStyleNo">
        <a-input
          v-model:value="form.tagStyleNo"
          placeholder="请输入标签编号"
          allow-clear
          autocomplete="off"
        />
      </a-form-item>
      -->
      <a-form-item label="类型:" name="type">
        <a-select v-model:value="form.type" placeholder="请选择类型">
          <a-select-option :value="1">画风</a-select-option>
          <a-select-option :value="2">标签</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="风格:" name="style">
        <a-input
          v-model:value="form.style"
          placeholder="请输入风格"
          allow-clear
          autocomplete="off"
        />
      </a-form-item>

      <a-form-item label="新建:" name="newFlag">
        <a-switch
          @change="(checked) => editNewFlag(checked)"
          v-model="form.newFlag"
          :checked="form.newFlag === 'Y'"
        />
      </a-form-item>

      <a-form-item label="热门:" name="hotFlag">
        <a-switch
          v-model="form.hotFlag"
          :checked="form.hotFlag === 'Y'"
          @change="editHotFlag"
        />
      </a-form-item>

      <a-form-item label="文件上传:">
        <a-upload
          :action="uploadUrl"
          :multiple="true"
          :file-list="fileList"
          name="file"
          :data="extraData"
          @change="handleUploadChange"
        >
          <a-button>
            <upload-outlined></upload-outlined>
            Upload
          </a-button>
        </a-upload>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { message } from 'ant-design-vue';
import { TagStyleInfoApi } from '/@/api/touch/tagStyle/TagStyleInfoApi';

export default {
  name: 'TagStyleInfoEdit',
  components: {},
  emits: ['done', 'update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
  },
  data() {
    return {
      headers: {
        authorization: 'Bearer <your_access_token>',
      },
      extraData: {
        // 可以添加一些额外的数据
        project: 'my-project',
      },
      uploadUrl: '/sysFileInfo/upload',
      fileList: [],
      // 表单数据
      form: this.data
        ? Object.assign({}, this.data)
        : { newFlag: 'N', hotFlag: 'N', type: 1, style: '' },
      // 表单验证规则
      rules: {
        type: [{ required: true, message: '请输入字段类型', type: 'number', trigger: 'blur' }],
        style: [{ required: true, message: '请输入风格', type: 'string', trigger: 'blur' }],
        newFlag: [{ required: true, message: '请输入风格', type: 'string', trigger: 'blur' }],
        hotFlag: [{ required: true, message: '请输入风格', type: 'string', trigger: 'blur' }],
        imageFileId: [{ required: true, message: '请上传文件', type: 'string', trigger: 'blur' }],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
    };
  },
  watch: {
    visible() {
      if (this.visible) {
        if (this.data) {
          this.form = Object.assign({}, this.data);
          this.isUpdate = true;
        } else {
          this.form = {};
          this.isUpdate = false;
        }
        if (this.$refs.form) {
          this.$refs.form.clearValidate();
        }
      }
    },
  },
  methods: {
    handleUploadChange(info) {
      const { file, fileList } = info;
      this.fileList = fileList;

      if (file.status === 'uploading') {
        // 上传过程中的处理逻辑
      } else if (file.status === 'done') {
        // 上传成功的处理逻辑
        console.log('File uploaded successfully:', file.response);
      } else if (file.status === 'error') {
        // 上传失败的处理逻辑
        console.error('File upload failed:', file.error);
      }
    },
    editStatus(checked) {
      this.form.newFlag = checked ? 'Y' : 'N';
    },
    editStatusHotFlag(checked) {
      this.form.hotFlag = checked ? 'Y' : 'N';
    },
    //    const editStatus = async (checked: boolean, row: any) => {
    //   const templateId = row.templateId;
    //   // 职位状态：Y-启用，N-禁用
    //   const statusFlag = checked ? 'Y' : 'N';
    //   const result = await ThemeTemplateApi.updateTemplateStatus({ templateId });
    //   message.success(result.message);
    //   row.statusFlag = statusFlag;
    //   reload();
    // };
    /**
     * 保存和编辑
     *
     * @author fkwoben
     * @date 2024/06/22 14:00
     */
    async save() {
      // 校验表单
      await this.$refs.form.validate();

      // 修改加载框为正在加载
      this.loading = true;

      let result = null;
      // 执行编辑或修改
      if (this.isUpdate) {
        console.log('this.form', this.form);
        result = TagStyleInfoApi.edit(this.form);
      } else {
        console.log('this.for1m', this.form);
        result = TagStyleInfoApi.add(this.form);
      }
      result
        .then((result) => {
          // 移除加载框
          this.loading = false;

          // 提示添加成功
          message.success(result.message);

          // 如果是新增，则form表单置空
          if (!this.isUpdate) {
            this.form = {};
          }

          // 关闭弹框，通过控制visible的值，传递给父组件
          this.updateVisible(false);

          // 触发父组件done事件
          this.$emit('done');
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 更新编辑界面的弹框是否显示
     *
     * @param value true-显示，false-隐藏
     * @author fkwoben
     * @date 2024/06/22 14:00
     */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
  },
};
</script>
